<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
<#assign base=request.contextPath  />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="misapplication-tap-highlight" content="no"/>
    <meta name="HandheldFriendly" content="true"/>
    <meta name="MobileOptimized" content="320"/>
    <title>我要租车</title>
    <link rel="stylesheet" type="text/css" href="${base}/css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/Yang/layui/css/layui.css"/>
    <link rel="stylesheet" href="${base}/css/common.css" type="text/css" charset="utf-8"/>
    <script src="${base}/js/jquery-1.8.2.min.js"></script>
    <script src="${base}/js/demo.js"></script>
    <script src="${base}/Yang/layui/layui.js"></script>
    <script src="${base}/Yang/jquery-1.9.0.min.js"></script>
    <style type="text/css">
        .content {
            text-align: center;
            padding-top: 0px;
        }

        #content p {
            margin: 5px;
        }

        .layui-nav .layui-nav-item {
            line-height: 40px;
        }

        .layui-nav:after, .layui-nav-tree:after {
            background-color: #9AC747;
        }

        .layui-form-label {
            color: #000000;
            text-align: center;
        }

        .layui-nav .layui-this::after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed::after {
            background-color: #9AC747;
        }

        .layui-input-block {
            margin-right: 5px;
        }

        .layui-btn {
            border-radius: 5px;
        }

        .top2 {
            width: 100%;
            height: 45px;
            padding: 0px;
            margin: 0px;
            font-weight: bold;
            text-align: left;
            background-color: white;

        }

        .meishi22 > ul, .grade-eject > ul, .Category-eject > ul, .Sort-eject > ul {
            margin: 0;
            margin-top: 0px;
            height: auto;
            padding-bottom: 20px;
            width: 100%;
        }

        div.screening > ul > li {
            width: 100%;
            background: url(../img/on_1.png) no-repeat 94% center;
        }

        blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
            margin: 0;
            padding: 0;
            line-height: 26px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .grade-w-roll {
            top: 43px;
        }

        .layui-form-item {
            margin-bottom: -13px;
            clear: both;
            *zoom: 1;
        }

        .layui-input-block input {
            width: 90%;
        }
    </style>
</head>
<body onselectstart="return false;">
<div id="content" class="content">
    <div class="top2">
        <div class="screening">
            <ul>
            <#--<li class="Regional"style="width: 44%;text-align: left;padding-left: 20px;">位置</li>-->
                <li class="Sort" style="height: 42px;font-size: 15px;">条件搜索</li>
            </ul>

        </div>
        <div class="Sort-eject Sort-height">
            <ul class="Sort-Sort" id="Sort-Sort">
                <dd style="margin-top: 10px">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">载重</label>
                            <div class="layui-input-block">
                                <input type="text" lay-verify="required" autocomplete="off" class="layui-input"
                                       id="carSize" name="carSize">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">续航</label>
                            <div class="layui-input-block">
                                <input type="text" lay-verify="required" autocomplete="off" class="layui-input"
                                       id="carKm" name="carKm">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">轴距</label>
                            <div class="layui-input-block">
                                <input type="text" lay-verify="required" autocomplete="off" class="layui-input"
                                       id="base" name="base">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">品牌</label>
                            <div class="layui-input-block">
                                <input type="text" lay-verify="required" autocomplete="off" class="layui-input"
                                       id="carBrand" name="carBrand">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">企业名称</label>
                            <div class="layui-input-block">
                                <input type="text" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div style="text-align: center;width: 100%">
                        <button class="layui-btn" style="width: 39%;background-color: #9AC747;margin-left: 10px"
                                onclick="initCarsa()" type="button">搜索
                        </button>
                        <button type="reset" style="width: 39%" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </dd>
            </ul>
        </div>
    </div>
<#--<form class="layui-form" action="">-->
<#--<ul id="plist"style="list-style:none;margin:0;padding:0;text-align:center;background-color: #9AC747;width: 100%;" class="layui-nav">-->
<#--<li class="layui-nav-item" style="width: 98%;margin-top: 5px">-->
<#--<p href="#" style="color: white">条件搜索</p>-->
<#--<dl class="layui-nav-child">-->
<#--<dd >-->
<#--<div class="layui-form-item">-->
<#--<div class="layui-inline">-->
<#--<label class="layui-form-label">载重</label>-->
<#--<div class="layui-input-block">-->
<#--<input type="text" lay-verify="required" autocomplete="off" class="layui-input" id="carSize" name="carSize">-->
<#--</div>-->
<#--</div>-->
<#--</div>-->
<#--<div class="layui-form-item">-->
<#--<div class="layui-inline">-->
<#--<label class="layui-form-label">续航</label>-->
<#--<div class="layui-input-block">-->
<#--<input type="text" lay-verify="required" autocomplete="off" class="layui-input" id="carKm" name="carKm">-->
<#--</div>-->
<#--</div>-->
<#--</div>-->
<#--<div class="layui-form-item">-->
<#--<div class="layui-inline">-->
<#--<label class="layui-form-label">轴距</label>-->
<#--<div class="layui-input-block">-->
<#--<input type="text" lay-verify="required" autocomplete="off" class="layui-input" id="base" name="base">-->
<#--</div>-->
<#--</div>-->
<#--</div>-->
<#--<div class="layui-form-item">-->
<#--<div class="layui-inline">-->
<#--<label class="layui-form-label">品牌</label>-->
<#--<div class="layui-input-block">-->
<#--<input type="text" lay-verify="required" autocomplete="off" class="layui-input" id="carBrand" name="carBrand">-->
<#--</div>-->
<#--</div>-->
<#--</div>-->
<#--<hr/>-->
<#--<div style="text-align: left;margin-left: 40px;">-->
<#--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
<#--<button class="layui-btn" style="width: 150px;background-color: #9AC747;" onclick="initCarsa()" type="button">确认搜索</button>-->
<#--</div>-->
<#--</dd>-->
<#--</dl>-->
<#--</li>-->
<#--</ul>-->
<#--</form>-->
</div>
<div class="layui-row" id="cars">

</div>

</body>
<script>
    layui.use(['form', 'layedit', 'laydate', 'element'], function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;
    });
    initCars();

    function initCars() {
        $.ajax({
            type: "POST",
            url: "${base}/WechatCar/findCar",
            async: false,
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    var moneys = data[i].carMoeny;
                    if (moneys == null) {
                        moneys = "0";
                    }
                    $("#cars").append(
                            ' <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="padding: 15px;">' +
                            '<div class="grid-demo">' +
                            '<img style="height: 120px;width:100%;border-top-left-radius: 5px;border-top-right-radius: 5px;"  onclick="toInfo(' + "'" + data[i].id + "'" + ')" style="width:100%;height: 100%;"src="${base}/weUser/getPhoto?path=' + data[i].carImageUrl + '"/>' +
                            '<div style="background-color:#9AC747;color: white;width:100%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: left;"><span style="margin-left: 8px;">' + data[i].carName + '</span></div>' +
                            '<p><span style="margin: 8px 0;font-size: 14px;color: #CF2D28;">车辆价格<span style="font-size: 16px; color: #676F7F;margin-left: 35px;">¥&nbsp;' + moneys + '</span></span></p >' +
                            '<p style="background-color: white;width:100%;width:100%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: left;"><span style="margin: 5px 0px;font-weight: bold;font-size: 15px;">车辆型号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 16px;">' + data[i].carType + '<span></span></p >' +
                            '</div>' +
                            '</div>'
                    )
                }

            }
        });

    }

    function initCarsa() {
        var carSize = $("#carSize").val();
        var carKm = $("#carKm").val();
        var base = $("#base").val();
        var carBrand = $("#carBrand").val();

        $.ajax({
            type: "POST",
            data: {"carSize": carSize, "carKm": carKm, "base": base, "carBrand": carBrand},
            url: "${base}/WechatCar/findCara",
            success: function (data) {
                $("#cars").html("");
                for (var i = 0; i < data.length; i++) {
                    $("#cars").append(
                            ' <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="padding: 15px;">' +
                            '<div class="grid-demo">' +
                            '<img style="height: 120px;width:100%;border-top-left-radius: 5px;border-top-right-radius: 5px;"  onclick="toInfo(' + "'" + data[i].id + "'" + ')" style="width:100%;height: 100%;"src="${base}/weUser/getPhoto?path=' + data[i].carImageUrl + '"/>' +
                            '<div style="background-color:#9AC747;color: white;width:100%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: left;"><span style="margin-left: 8px;">' + data[i].carName + '</span></div>' +
                            '<p><span style="margin: 8px 0;font-size: 14px;color: #CF2D28;">车辆价格<span style="font-size: 16px; color: #676F7F;margin-left: 35px;">¥&nbsp;' + moneys + '</span></span></p >' +
                            '<p style="background-color: white;width:100%;width:100%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: left;"><span style="margin: 5px 0px;font-weight: bold;font-size: 15px;">车辆型号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 16px;">' + data[i].carType + '<span></span></p >' +
                            '</div>' +
                            '</div>'
                    )
                }
            }
        });

    }


    function toInfo(id) {
        window.location.href = "${base}/WechatCar/info.html?id=" + id
    }
</script>
</html>
